<template>
  <div id="app">
    <keep-alive :exclude="destroied" >
      <router-view ref="view"></router-view>
    </keep-alive>
    <nav1></nav1>
    <login v-if="!isLogin"></login>
    <div class="modal"  v-if="isModal">
      <div>
        <p>{{hint.text}}</p>
        <span @click="setIsModal(false)">取消</span><b @click="confirm">确认</b>
      </div>
    </div>
    <hint v-if="hint.isHint" :hint="hint"></hint>
  </div>
</template>
<script type="text/ecmascript-6">
  import md5 from 'js-md5'
  import nav1 from 'components/nav'
  import login from 'components/login'
  import hint from 'components/hint'
  import vue from 'vue'
  import {w_scroll_top} from 'assets/dom/dom'
  import {mapGetters,mapMutations} from 'vuex'
  import {get_car_number} from 'api/shop_car'
  import {get_cookie} from 'assets/cookie/cookie'
  import * as recommend from 'api/recommend'
  import wxSdk from 'weixin-js-sdk'

  export default {
    name: 'app',
    data() {
      return {
        destroied:['detial', 'appraise-commodity','commentList'],
        includedComponents: "",
        indexTop: 0,
        allClassTop: 0,
        searchTop: 0,
        show_search:false
      }
    },
    created(){
      document.body.addEventListener('touchstart', function () {})
      this.get_car_number()
      this.getSharInfo()
    },
    mounted() {
      this.$nextTick(function () {
        console.log(1)
      })
    },
    computed:{
      ...mapGetters(['isLogin','isModal','hint'])
    },
    methods: {
      confirm(){
        this.setIsModal(false)
        this.$refs.view.confirm()
      },
      setkeep(iskeep) {
        this.includedComponents = iskeep
        setTimeout(()=>{
          this.includedComponents=""
        },500)
      },
      get_car_number(){
        get_car_number({
          token:get_cookie('key')
        }).then((res)=>{
          console.log(res)
          if(res.status===200&&res.data.resStatus===0){
            this.setCarNumber(res.data.data[0]['no-cart'])
          }
        })
      },
      ...mapMutations({
        setIsModal: 'SET_IS_MODAL',
        setCarNumber: 'SET_CAR_NUMBER',
        setOpenId:'SET_OPEN_ID',
        setHint:'SET_HINT'
      }),
      getSharInfo() {
        this.getWxConfig()
        recommend.getShareDescriptionInfo().then(resault => {
          if (resault.status === 200 && resault.data.data !== null) {
            console.log('home-sucess')
            console.log(resault.data.data)
            this.$store.commit('setShareHomeInfo', resault.data.data[0])
            this.$store.commit('setShareDetailInfo', resault.data.data[1])
            this.$store.commit('setShareCouponInfo', resault.data.data[2])
            let homeInfo = this.$store.state.shareHomeInfo
            this.$wxShareConfig()
            this.$wxShared(window.location.href, homeInfo.title, homeInfo.details, homeInfo.icon)
          }
        }).catch(resault => {
          console.log(resault)
        })
      },
      getWxConfig() {
      }
    },
    components: {
      nav1,
      login,
      hint
    },
    watch: {
      '$route'(to, from) {
        // 分享按钮隐藏和显示
        if (to.path.indexOf('detial') > 0 || to.path.indexOf('shared_surprise') > 0 || to.path.indexOf('index') > 0) {
          wxSdk.showOptionMenu()
        } else {
          wxSdk.hideOptionMenu()
        }
        // 分享信息设置
        let shareInfo = null
        let shareUrl = window.location.href
        if (to.path.indexOf('detial') > 0) {
          shareInfo = this.$store.state.shareDetailInfo
        } else if (to.path.indexOf('shared_surprise') > 0) {
          console.log(get_cookie('phone'))
          shareInfo = this.$store.state.shareCouponInfo
          shareUrl = shareInfo.url + '?phone=' + md5(get_cookie('phone'))
        } else {
          shareInfo = this.$store.state.shareHomeInfo
        }
//        let shareInfo = to.path.indexOf('/detial') > 0 ? this.$store.state.shareDetailInfo : this.$store.state.shareHomeInfo
        this.$wxShared(shareUrl, shareInfo.title, shareInfo.details, shareInfo.icon)

        if (from.path === to.path) {
          return
        }
        if(to.path.match(/\//g).length===from.path.match(/\//g).length){
          setTimeout(()=>{
            w_scroll_top(0)
          },50)
          setTimeout(()=>{
            w_scroll_top(0)
          },100)
          setTimeout(()=>{
            w_scroll_top(0)
          },150)
          setTimeout(()=>{
            w_scroll_top(0)
          },200)
        }
      }
    }
  }
</script>

<style lang="scss">
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    overflow: hidden;
  }

  .modal{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.1);
    z-index: 12;
    >div{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%)translateY(-50%);
      background-color: #fff;
      border-radius: 5px;
      border: 1px solid #eee;
      width:300px;
      padding: 20px;
      >p{
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        margin-bottom: 15px;
        font-size: 14px;
        letter-spacing: 1px;
      }
      >span{
        margin-right: 45px;
        display: inline-block;
        padding: 10px;
        color: #999;
        font-weight: 500;
      }
      >b{
        display: inline-block;
        padding: 10px;
        color: #666;
        font-weight: 500;
      }
    }

  }
</style>
